<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>

<html  xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="Description" content="Social Group Chat, Convo: <%=h @conversation.name %>"/>
	<title><%=h @conversation.name -%> | EchoWaves (Social Group Chat)</title>
  <link rel="shortcut icon" href="/favicon.ico"/>
 	
  <link rel="stylesheet" href="/stylesheets/screen.css" type="text/css" media="screen, projection"/>
  <link rel="stylesheet" href="/stylesheets/print.css" type="text/css" media="print"/> 

  <link rel="stylesheet" href="/stylesheets/style.css" type="text/css" media="screen, projection"/>
  <%#= stylesheet_link_tag 'livepipe' %>
 	<%= stylesheet_link_tag 'default' %>
 	<%= stylesheet_link_tag 'chat' %>
 	<%= javascript_include_tag :defaults %>
 	<%= javascript_include_tag "i18n/#{I18n.locale}" %>
 	<%= javascript_include_tag "sound" %>
 	<%= javascript_include_tag "windowmanager" %>
 	<%= javascript_include_tag "keyboard" %>
 	<%= javascript_include_tag "protofish-min" %>
 	
	<%= stylesheet_link_tag 'unitip' %>
	<%= javascript_include_tag 'unitip' %>
	<%= javascript_include_tag "ejs" %>
  
	<!--[if IE]>
    <link rel="stylesheet" href="/stylesheets/ie.css" type="text/css" media="screen, projection"/>
  <![endif]-->
	
 	<%= orbited_javascript %> 		

 	<script type="text/javascript">  
  <!--
  // FIXME: move this JS to file

  // FIXME: workaround for safari never ending loading issue
  var orig_chooseTransport = Orbited.util.chooseTransport; 
  Orbited.util.chooseTransport = function() { 
      if (BrowserDetect.browser == "Safari") { 
          return Orbited.CometTransports.LongPoll 
      } 
      return orig_chooseTransport(); 
  }
  
 	function stomp_function() {
 		 var output = $('connection_stat_data');
 		// set up shell.
 		// set up stomp client.
 		stomp = new STOMPClient();
 		stomp.onopen = function() {
			output.title = "connecting"
 			output.update('<span class="status_yellow tip">&copy;</span>');
 		};
 		stomp.onclose = function(code) {
 			output.update('<span class="status_red tip" title="disconnected">&copy;</span>');
 			//try to reconnect
 			// stomp.connect(document.domain, 61613, 'UNIQUE_ID_PER_CLIENT', '');
			stomp.connect('<%=STOMP_HOST%>', <%=STOMP_PORT%>, '<%=h current_user %>', '');
			// stomp.subscribe('CONVERSATION_CHANNEL_<%=@conversation.id%>', {exchange:''});	 		
 		};
 		stomp.onerror = function(error) {
 			alert("onerror: " + error);
 			output.update('<span class="status_red tip" title="error">&copy;</span>');
 		};
 		stomp.onerrorframe = function(frame) {
 			alert("onerrorframe: " + frame.body);
 			output.update('<span class="status_red tip" title="frame error">&copy;</span>');
 		};
 		stomp.onconnectedframe = function() {
 			output.update('<span class="status_green tip" title="receiving message">&copy;</span>');
			stomp.subscribe('CONVERSATION_CHANNEL_<%= @conversation.private? ? @conversation.uuid : @conversation.id %>', {exchange:''});
 		};
 		stomp.onmessageframe = function(frame) {
 		  var json = frame.body.evalJSON();
 			var message_output = $('messages');
			// this is an actual message for current conversation
 			if(frame.headers['destination'].startsWith("CONVERSATION_CHANNEL_") ) {
 			  // render message from JSON
 			  var html = new EJS({url: '/templates/message.ejs'}).render(json);
 			  // alert(((document.body.clientHeight - document.viewport.getScrollOffsets().top ) - document.viewport.getHeight()));					
				// let's see if the messages list is scrolled to the bottom
				// before we render the message
 			  var in_the_bottom = ((document.body.clientHeight - document.viewport.getScrollOffsets().top ) - document.viewport.getHeight()) <= 0 ? true : false
 				message_output.insert({"bottom":html});
        unitipize($('tip_'+json.message.id));
				if ( in_the_bottom ) { 	
					new Effect.ScrollTo('message_' + json.message.id);
					$("message_" + json.message.id).hide();
					$("message_" + json.message.id).appear();
					
				}
				// temp. dissabled
				// new Effect.Pulsate('connection_stat_data');
			<% if session[:sound] == "on" %>
				Sound.play('/sounds/sound39.mp3');
			<% end %>
 			}	
			// this is a notify conversation message
 			if(frame.headers['destination'].startsWith("CONVERSATION_NOTIFY_CHANNEL_") ) {
			}

 		};
		stomp.connect('<%=STOMP_HOST%>', <%=STOMP_PORT%>, 'user_<%=h current_user %>', '');
 		// setTimeout("stomp.subscribe('CONVERSATION_CHANNEL_<%=@conversation.id%>', {exchange:''})", 5000);

 	};
// -->
  </script>
  
  <script type='text/javascript'>

  // Copyright 2006-2007 javascript-array.com

  var timeout	= 500;
  var closetimer	= 0;
  var ddmenuitem	= 0;

  // open hidden layer
  function mopen(id)
  {	
  	// cancel close timer
  	mcancelclosetime();

  	// close old layer
  	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

  	// get new layer and show it
  	ddmenuitem = document.getElementById(id);
  	ddmenuitem.style.visibility = 'visible';

  }
  // close showed layer
  function mclose()
  {
  	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
  }

  // go close timer
  function mclosetime()
  {
  	closetimer = window.setTimeout(mclose, timeout);
  }

  // cancel close timer
  function mcancelclosetime()
  {
  	if(closetimer)
  	{
  		window.clearTimeout(closetimer);
  		closetimer = null;
  	}
  }

  // close layer when click-out
  document.onclick = mclose;
  </script>
</head>

<body id="messages_layout" onload="Misc.focusInput('message_message');stomp_function();">
	<div id="header_container"><%= render(:partial => "shared/header") %></div>

  	
	<div id="main_content" class="container">
		<div id="col1" class="span-14">
		  <%= flash_messages %>
  		<% if (logged_in? && @conversation.readable_by?(current_user)) || !@conversation.private? %>  		  
  		  <div id="convo_header_container">
      	  <div id="convo_header" >
      	    <h5>&nbsp;
        	    <% if @conversation.private? %><%= image_tag("/images/icons/icono_candado.gif") %><% end %>
        	  	<% if @conversation.read_only %><%= image_tag("/images/icons/comment_delete.png") %><% end %>
        	  	<span id="convo_name"><%= link_to h(@conversation.name), conversation_path(@conversation) %></span>
        	  	<span id="convo_owner">
                  <%= link_to "@" + h(@conversation.user.login), user_path(@conversation.user) %>
              </span>
        	  </h5>
        	  <div id="convo_tools">
    			    <div class="padding05">
    			      <%= render :partial => 'conversations/star', :locals => { :conversation => @conversation } %>
    			      <% if @conversation.parent_message_id %>
            	    <span class="sbutton round"><%= link_to t("ui.back_to_parent"), conversation_path(@conversation.parent_message.conversation)%></span>
            	  <% end %>
                <span class="sbutton round"><%= render :partial => 'subscriptions/follow', :locals => { :conversation => @conversation } %></span>
            	  &nbsp;
            	  
            	  

                <ul id="convo-menu">
                    <li><a href="#" 
                        onmouseover="mopen('m1')" 
                        onmouseout="mclosetime()">Filter</a>
                        <div id="m1" 
                            onmouseover="mcancelclosetime()" 
                            onmouseout="mclosetime()">
                            <%= link_to t("ui.all"), conversation_path(@conversation)%>
                            <%= link_to t("ui.with_files"), files_conversation_path(@conversation)%>
                            <%= link_to t("ui.with_images"), images_conversation_path(@conversation)%>
                        </div>
                    </li>
                    <% if current_user == @conversation.owner %>
                    <li><a href="#" 
                        onmouseover="mopen('m2')" 
                        onmouseout="mclosetime()">Settings</a>
                        <div id="m2" 
                            onmouseover="mcancelclosetime()" 
                            onmouseout="mclosetime()">
                          <%= link_to(@conversation.read_only? ? t("ui.make_writable") : t("ui.make_read_only"), conversation_path(@conversation), :method => 'put') %>
                        </div>
                    </li>
                    <% end %>
                </ul>
                <div style="clear:both"></div>
                
                

                <%# filter here %>
          		</div>
          	</div>
    			  
      	  </div>
      	</div>

        	
  		  <%= yield  %>
  		  
  		  <div id="attachment_form" style="display:none">
    	      <%#this form is purely for attachments handling%>
    	      <% form_for(:message, 
    	    	    :url  => { :controller => "messages", :action => "upload_attachment", :conversation_id => @conversation.id },
    	          :html => { :multipart => true, :target => "upload_frame", :id => 'atchform' } ) do |f| %>
	  		    <div id="attachment_form_padding">
				
    	        <%= f.file_field :attachment %>
    	    	  <input type="hidden" name="conversation_id" id="conversation_id" value="<%= @conversation.id %>"/>
    	    	  <p id="attach_msgtextarea">        
                <%= f.text_area :message,
                    :onkeyup => "FitToTextAndMoveMessagesUp(this, (document.viewport.getHeight() - 300));Misc.pageScroll();",
                    :class => 'messageinput',
                    :id => "attch_message" %>  
              </p>
              <p class="out_of_screen">
                <%= label_tag "important" %>
                <input id="message_something" name="message[something]" onfocus="javascript:$('attch_message').focus()" size="30" type="text" />
              </p>
              <p class="msgformcontrols">
    	    	  <%= link_to_function t("ui.cancel") do |page|
                  page[:attachment_form].hide
                  page[:attachment_link].show
                  page.textarea.sync('attch_message','message_message')
                  page[:atchform].reset
              end %>
              <%= submit_tag t("ui.attach") %>
              </p>
          </div><!-- attachment_form_padding -->
    	      <% end %>
    	      <iframe id="upload_frame" name="upload_frame" style="width:0px;height:0px;border:0px" src="about:blank"></iframe>
        </div><!-- attachment_form -->
        
		    <div id="messagesform">
		      <div id="messagesform_padding">
		        <span id="working" style="display:none;"><%= image_tag "/images/icons/waves.png" %></span>
			      <div id="messageinputdiv">
			               
			        <% if logged_in? && @conversation.writable_by?(current_user) %>
                <% remote_form_for(:message,
                  :update => 'messages', :position => 'bottom',
                  :url => conversation_messages_path(@conversation),
                  :loading => "$('message_message').value = '';$('message_attachment').value = '';$('message_message').style.height = '1.5em';$('message_message').focus();$('messages').setStyle('padding-bottom: 54px');",
                  :complete => "$('working').fade({ duration: 0 });",
                  # don't poll right now, and set the "after" value
                  :before => "$('working').appear({ duration: 0 });",
                  :condition => "$('message_message').value.strip().length > 0",
                  :html => {:id => 'msgform'}) do |f| %>

                  <p class="out_of_screen">
                    <%= label_tag "important" %><input id="message_something" name="message[something]" onfocus="javascript:$('message_message').focus()" size="30" type="text" />
                  </p>

                  <span id="msgtextarea">        
                    <%= f.text_area :message, :onkeyup => "FitToTextAndMoveMessagesUp(this, (document.viewport.getHeight() - 300));Misc.pageScroll();", :class => 'messageinput' %>  
                  </span>

                  <p class="msgformcontrols">                  
                    <%= link_to_function t("ui.attach_file"), :id => 'attachment_link' do |page|
                      page[:attachment_form].show
                      page[:attachment_link].hide
                      page.textarea.sync('message_message','attch_message')
                    end %>
                     <span class="mute"><%= t("ui.shift_enter") %></span>
                    <%= submit_tag t("ui.send") %>
                  </p>
                <% end %>
              <% else %>
                <% if logged_in? %>
                  <h4 class="center"><%= t("conversations.this_is_an_read_only_convo") %></h4>
                <% else %>
                  <h4 class="center"><%= t("conversations.login_or_register_to_participate") %></h4>
                <% end %>
       		    <% end %>
			        	        
			        
			      </div><!-- messageinputdiv -->
          </div><!-- messagesform_padding -->
        </div><!-- messagesform -->
      <% else %>
  		  <h4 class="center"><%= t("errors.sorry_this_is_a_private_convo") %></h4>
  		<% end %>
		</div><!-- col1 -->
		
    <div id="sidebars" class="span-10 last">
      &nbsp;
      <div id="sidebars_container">
	      
	      <%= render :partial => 'shared/dashboard' %>		    
		    
	      <div class="span-10"><%= yield(:sidebar_bottom) %></div>
		    
          
      </div><!-- sidebars_container -->
      
    </div><!-- sidebars -->
    
	</div><!-- main_content -->
	
	<div id="footer_container"><%= render(:partial => "shared/footer") %></div>

	<%#for now lets poll for new messages in conversations that are off the screen%>  
	<%= periodically_call_remote :url => {:controller => 'users', :action => 'update_news', :conversation_id => @conversation.id}, 
		:frequency => UPDATE_NEW_MESSAGES_FREQUENCY, :complete => 'ShowUnreadMessagesInFluidapp();' %>
  
  <%#do not remove this scrips partial, used by google stats, ie6 detector, etc...%>
  <%#----------------------------------------------------------------------------%>
  <%= render :partial => "shared/scripts"%>
</body>
</html>
